<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>markdown-to-jsx, a fast and versatile markdown toolchain</title>
    <meta
      name="description"
      content="Possibly the world's fastest markdown parser and compiler, 100% GFM+CommonMark compliant, and with output support for AST, HTML, React, and Markdown."
    />
    <meta property="og:image" content="/images/social.png" />
    <meta name="twitter:image" content="/images/social.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="icon" href="/icon.svg" />
    <link rel="canonical" href="https://markdown-to-jsx.quantizor.dev/" />
    <link
      href="https://unpkg.com/katex@0.16.9/dist/katex.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/obsidian.min.css"
    />
    <link rel="stylesheet" href="/src/site/index.css" />
    <script
      crossorigin
      src="https://unpkg.com/katex@0.16.9/dist/katex.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"
    ></script>
  </head>

  <body>
    <div id="root"></div>

    <!-- prettier-ignore -->
    <script type="text/plain" id="sample-content">
# This is Markdown

✨ You can edit me! ✨

[Markdown](http://daringfireball.net/projects/markdown/) lets you write content in a really natural way.

  * You can have lists, like this one
  * Make things **bold** or *italic*
  * Embed snippets of `code`
  * Create [links](/)
  * ...

<small>Sample content borrowed with thanks from [elm-markdown](http://elm-lang.org/examples/markdown) ❤️</small>

> [!Tip]
> Normal and "alert" blockquotes are possible. Use `renderRule` for more control if needed. Classes like `.markdown-alert-[type]` are provided as styling hooks.

Custom handling of code blocks (or any rule!) is possible with the [`renderRule` option](https://github.com/quantizor/markdown-to-jsx#optionsrenderrule). For example, LaTeX support via [`@matejmazur/react-katex`](https://www.npmjs.com/package/@matejmazur/react-katex):

```latex
\mathbb{N} = \{ a \in \mathbb{Z} : a > 0 \}
```

Or any other typical language, using [`highlight.js`](https://highlightjs.org/):

```javascript
function App() {
  return <div>Hello world!</div>;
}
```

You can even include custom React components if you declare them in the [`overrides` option](https://github.com/quantizor/markdown-to-jsx/blob/main/README.md#optionsoverrides---rendering-arbitrary-react-components).

<MyComponent>Isn't _that_ cool?</MyComponent>
</script>

    <script src="/site.tsx" type="module"></script>
  </body>
</html>
